/* 
        需求分析：
            1.进入购物车的时候，一开始需要进行验证
            获取localStorage的cartList中是否有数据
                如果cartList中没有数据的时候，就显示默认页面；
                如果cartList有数据的话，就把cartList里面的数据渲染到页面中
            2.制作购物车功能：(事件委托)
                1)数量的加减：
                    修改cartList中的cart_number的值
                    · 给加号按钮设置自定义属性：data-id=goods_id,点击加号的时候，获取自定义属性id
                    · 遍历cartList中的商品，判断是不是选中的商品id，如果是，给它的cart_num++,并且重新渲染页面
                    · 加法需要注意：加的数量不可以大于库存数量：${
                        item.cart_number >= item.goods_number ? "disabled" : ""
                    · 减法操作一样，但是需要考虑：num等于1的时候，禁止disabled,所以给减号的button添加禁用 ${item.cart_number <= 1 ? "disabled" : ""}
                2)删除（我不要了）：
                    · 给按钮绑定自定义属性id data-id="${
                      item.goods_id}"
                    · 利用filter，将满足条件的赋值给新数组，不满足的过滤掉(item.goods_id == id3)
                3)全选：
                    · 需要获取所有的选中框，但是不获取的时候怎么设置？is_select 默认是0 ，表示没有被选中，1表示选中，在选中框的里面需要加一个三目判断
                    · ${
                       item.is_select == 1 ? "checked" : ""} 
                    · 全选框怎么解决？
                          var bool = cartList.every((item) => {
                                return item.is_select == 1;});
                           ${bool ? "checked" : ""}
                    · 做选中框：
                          给当前选中框添加自定义属性id,确定修改的是哪个商品
                          item.is_select = item.is_select == 1 ? 0 : 1;
                4)商品种类：
                    cartList的长度  ${cartList.length}
                5)购买商品总价：
                    total()
                    先获取cartList所有商品，通过is_select是否被选中，计算出数量和价格
                    然后放在模板字符串中  ${total()[0]}
                6)结算
                    通过filter来过滤未被选中的商品，点击确认后，就会把付完款的商品进行删除
                7)清空购物车：
                     localStorage.removeItem("cartList");
                     show1();
                     考虑到：当清空购物车的时候，应该回到默认样式 
*/
// 获取cookie的name1键
var name1 = getCookie("name1");
var cartList = localStorage.getItem("cartList") || [];
// console.log(cartList);

var url = location.href;
// console.log(location);
// 获取大盒子操作对象
var div1 = document.querySelector("#div1");
if (name1) {
  cartList = eval("(" + cartList + ")");
  if (cartList.length > 0) {
    // console.log(1);
    // 把字符串转为数组字符串
    // 拼接字符串
    show();
  } else if (cartList.length == 0) {
    // console.log(2);
    var str = `
      <div class="kongkong">
      <img src="../images/kongkong.png" alt="" >
      <a href="./list.html">回到列表页！</a>
      </div>
      `;
    div1.innerHTML = str;
  }
} else {
  alert("没有登录，需要登录哦");
  location.href = "./login.html?pathurl=" + url;
}
// 用来渲染页面的数据
function show() {
  var bool = cartList.every((item) => {
    return item.is_select == 1;
  });
  console.log(cartList);
  // 判断当前cartList中是否有数据
  var str1 = `
      <div class="totalgoods">
          <div class="totalgoods-top clear_fix">
            <p class="fl">全部商品<span style='color:red;'>${
              cartList.length
            }</span>件</p>
            <div class="fr">
                配送至：<select name="" id=""><option value="安徽省合肥市包河区包公街道">安徽省合肥市包河区包公街道</option></select>
            </div>
          </div>
          <div class="totalgoods-quanxuan">
              <input type="checkbox" name="quan" value="全选"  ${
                bool ? "checked" : ""
              }> 全选
              <span style="margin-left: 100px;">商品</span>
              <span  style="margin-left: 480px;">单价</span>
              <span  style="margin-left: 100px;">数量</span>
              <span  style="margin-left: 100px;">小计</span>
              <span  style="margin-left: 80px;">操作</span>
          </div>
    `;
  // 循环遍历cartList中的元素
  cartList.forEach((item) => {
    str1 += `
    <div class="goods_title">
    <span>潮宏基京东旗舰店</span>
    <img src="../images/shop.png" alt="">
    <img src="../images/youhuiquan.png" alt="" >
  </div>
  <div class="goods">
    <div class="goods-items">
      <input type="checkbox" name="xuan" class="fl" 
      ${item.is_select == 1 ? "checked" : ""} data-id='${item.goods_id}'>
      <img src="${
        item.goods_small_logo
      }" alt="" class="pic fl" style='width:110px;height:110px;'>
      <p class="title fl">${item.goods_name}</p>
      <span class="fl price">￥<span>${item.goods_price}</span></span>
      <div class="jianshu fl">
        <div class="fl jian" data-id='${item.goods_id}'>-</div>
        <div class="fl jiannum">${item.cart_number}</div>
        <div class="fl jia" data-id='${item.goods_id}'>+</div>
      </div>
      <span class="xiaoji fl">￥<span></span>${
        parseFloat(item.goods_price) * item.cart_number
      }</span>
      <div class="fl">
        <a href="javascript:;" class="del" data-id='${
          item.goods_id
        }'>删除</a><br>
      <a href="javascript:;" class="guanzhu">移入关注</a>
      </div>
    </div>
          `;
  });
  str1 += `
      <div class="totalgoods-qingli">
            <a href="javascript:;" class="fl shanchuxuanzhong">删除选中的商品</a>
            <a href="javascript:;" class="fl yiru">移入关注</a>
            <a href="javascript:;" class="fl qingli">清理购物车</a>
            <p class="yixuanze fl">已选择<span>${total()[0]}</span>件商品</p>
            <p class="zongjia fl">总价：￥<span>${total()[1]}</span></p>
            <i class="iconfont icon-dengpao "></i>
            <div class="jiesuan fr">去结算</div>
          </div>
      `;
  div1.innerHTML = str1;
}

// 下面是购物车的功能的实现
// 给大盒子对象绑定点击事件
div1.onclick = function (e) {
  var e = e || window.event;
  var target = e.target || e.srcElement;
  // console.log(target);
  //判断点击的是否为全选框
  if (target.name == "quan") {
    //遍历cartList中所有商品
    cartList.forEach((item) => {
      //判断当前全选框是否被选中
      if (target.checked) {
        item.is_select = 1;
      } else {
        item.is_select = 0;
      }
    });
    //重新把cartList赋值给locaStrong
    localStorage.setItem("cartList", JSON.stringify(cartList));
    //重新渲染一下页面
    show();
  }

  //判断点击的是否为选中框对象
  if (target.name == "xuan") {
    //获取当前选中框对象的自定义id属性
    var id4 = target.getAttribute("data-id");
    //遍历所有商品
    cartList.forEach((item) => {
      //判断遍历出来的商品id是否等于id4
      if (item.goods_id == id4) {
        //修改当前商品的is_select
        item.is_select = item.is_select == 1 ? 0 : 1;
      }
    });
    //重新把cartList赋值给locaStrong
    localStorage.setItem("cartList", JSON.stringify(cartList));
    //重新渲染一下页面
    show();
  }

  // 3.数量的加
  if (target.innerHTML == "+") {
    var id = target.getAttribute("data-id");
    // console.log(id);
    // 遍历cartList中的商品
    cartList.forEach((item) => {
      if (item.goods_id == id) {
        item.cart_number++;
      }
    });
    // 将加好的数据重新放入localStorage中
    localStorage.setItem("cartList", JSON.stringify(cartList));
    // console.log(cartList);
    show();
  }

  // 4.数量的减
  if (target.innerHTML == "-") {
    var id = target.getAttribute("data-id");
    // console.log(id);
    // 遍历cartList中的商品
    cartList.forEach((item) => {
      if (item.goods_id == id) {
        if (item.cart_number <= 1) {
          item.cart_number = 1;
        } else {
          item.cart_number--;
        }
      }
    });
    // 将加好的数据重新放入localStorage中
    localStorage.setItem("cartList", JSON.stringify(cartList));
    // console.log(cartList);
    show();
  }

  // 5.删除按钮
  if (target.innerHTML == "删除") {
    // 获取当前按钮的自定义属性
    var id2 = target.getAttribute("data-id");
    cartList = cartList.filter((item) => {
      return item.goods_id != id2;
    });
    localStorage.setItem("cartList", JSON.stringify(cartList));
    // console.log(cartList);
    show();
  }

  //清空购物车
  if (target.innerHTML == "清理购物车") {
    //重新把cartList赋值给locaStrong
    localStorage.setItem("cartList", JSON.stringify([]));
    //刷新页面
    location.reload();
  }

  //判断点击的是否为结算按钮
  if (target.innerHTML == "去结算") {
    if (confirm("你确定要支付：￥" + total()[1])) {
      //过滤已购买的商品
      cartList = cartList.filter((item) => {
        return item.is_select != 1;
      });
      localStorage.setItem("cartList", JSON.stringify(cartList));
      //重新渲染一下页面
      location.reload();
      show1();
    } else {
      alert("暂时不买了");
    }
  }
};

function total() {
  var num = 0; //所选商品数量
  var price = 0; //所选商品总价
  //遍历cartList中所有商品
  cartList.forEach((item) => {
    //判断当前商品是否被选中
    if (item.is_select == 1) {
      num += item.cart_number;
      price += parseFloat(item.goods_price) * item.cart_number;
    }
  });
  return [num, price];
}
